<template>
<!--  在vue2  里面需要有外层div包裹html标签代码-->
  <div class="login_container">
    <vue-particles
      style="height: 100vh"
      color="#39AFFD"
      :particleOpacity="0.7"
      :particlesNumber="100"
      shapeType="circle"
      :particleSize="4"
      linesColor="#8DD1FE"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
    >
    </vue-particles>
    <div class="login_box">
      <div class="avatar_box">
        <img src="../../assets/0.gif">
      </div>

<!--      2.form表单-->
      <el-form :model="loginForm" class="login_form" :rules="loginRules" ref="loginForm">
        <h2>强智教育管理系统</h2>
      <!--      1.用户名  如果说在 el-form 加上:rules="xxx" xxx需要在data()函数里面定义， :rules 需要和prop配合使用
          prop="名称“ 名称登录 输入框里面v-model="名称"保持一致-->
        <el-form-item prop="username">
          <el-input type="text" v-model="loginForm.username" placeholder="请输入用户名"
                    prefix-icon="el-icon-user-solid" clearable></el-input>
        </el-form-item>
      <!--     账号对应的密码   -->
        <el-form-item prop="password">
          <el-input type="password" v-model="loginForm.password" placeholder="请输入账号密码"
                    prefix-icon="el-icon-unlock" show-password clearable></el-input>
        </el-form-item>
        <el-form-item prop="verifyCode">
          <div class="verifyCode_box">
            <!--            输入框-->
            <el-input type="text" v-model="loginForm.verifyCode" class="verify_code"
                      prefix-icon="el-icon-picture" placeholder="请输入图片验证码/点击获取图片" clearable></el-input>
            <!--            图片验证码-->
            <img :src="varifyImg" style="width: 30%;height: 39px;margin: 0 0 0 12px;justify-content: flex-end" @click="changeImg">
          </div>
        </el-form-item>

            <!--        4.登陆和重置按钮-->
        <el-form-item style="display: flex; justify-content:flex-end">
            <el-button type="primary" @click="submitForm('loginForm')" @kryup.enter.native="submitForm('loginFrom')" plain><i :class="sub_mit"></i>登陆</el-button>
            <el-button type="info" @click="resetForm('loginForm')" plain><i :class="re_set"></i>重置</el-button>
        </el-form-item>

      </el-form>
    </div>

    <Vcode :show="isShow"  @success="success"  @close="close"
           :canvasWidth="400"  :canvasHeight="350"   class="login_box"  />
  </div>
</template>

<script>
// 1.导入图片滑块组件
import Vcode from 'vue-puzzle-vcode'

export default {
  name: 'Login',
  // 2.注册组件
  components: {
    Vcode
  },
  data () {
    return {
      varifyImg:'http://127.0.0.1:8989/captcha?time='+new Date(),
      isShow: false, // 首次进入页面不需要弹图片滑块，但我们在输入正确的值，点击登录按钮需要
      sub_mit: 'el-icon-s-grid',
      re_set: 'el-icon-delete',
      // 在vue form 里面 使用：model绑定 属性需要data函数中的return对象中去定义
      loginForm: {
        username: 'admin',
        password: '123456',
        verifyCode: 'fads'
      },
      loginRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 20, message: '请输入长度为3到20位字符的用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入用户名对应的密码', trigger: 'blur' },
          { min: 3, max: 16, message: '请输入长度为3到16位的密码', trigger: 'blur' }
        ],
        verifyCode: [
          // required: true 必填项，
          { required: true, message: '请输入图片验证码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    changeImg(){
      this.varifyImg = 'http://127.0.0.1:8989/captcha?time='+new Date()
    },
    success () {
      this.$http.post('system/user/login',this.loginForm).then(res =>{
        if(res.data.success){
          this.$message({
            title:'登录成功提示',
            type:'success',
            message:'登录成功'
          })
          LocalStorage.set(LOCAL_KEY_XINGUAN_ACCESS_TOKEN,res.data.data)
          this.getUserInfo();
        }else{
          this.$message.error(res.data.errorMsg)
        }
      })
      // this.isShow = false
      // this.$router.push('/dashBook')
    },
    async getUserInfo(){
      const { data : res}= await this.$http.get( 'system/user/info')
      console.log(res.data)
        if(res.success){
          console.log(res.data)
          LocalStorage.set("setUserInfo",res.data)
          this.$router.push('/dashBook')
        }else {
          this.$message.error(res.msg)
        }
    },
    close () {
      this.isShow = false
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.isShow = true
          // 弹窗 成功的提示
          this.$message.success('表单验证通过')
        } else {
          this.$message.error('用户名，密码，图片验证码为必填项!')
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
      this.$message.error(formName)
    }
  }
}
</script>
<!--样式 采用less 去编译-->
<style lang="less" scoped>
.login_container{
  height:100%;
  background-color: #0feb69;
}
.login_box{
  width: 450px;
  height: 100%;
  background-color: blueviolet;
}
.login_box{
  width: 450px;
  height: 380px;
  background-color: #FFFFFF;
  border-radius: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

  .avatar_box{
    width:120px;
    height: 120px;
    border: 1px solid #EEEEEE;
    border-radius: 50%;
    padding:8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0); // 阴影，倒影，投影
    margin: -65px auto; // 图片的上下-65px 负的往上跑，左右自动适应，水平居中
    background-color: #FFFFFF;
    img{
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #EEEEEE;
    }
  }
  .login_form{
    position: absolute;
    bottom: 1px;
    width:100%;
    padding: 0px 20px;
    box-sizing: border-box;
    .verifyCode_box{
      display: flex;
      .verify_code{
        width: 65%;
        justify-content: left;
      }
    }
  }
</style>
